<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        #canvas {
            display: block;
            margin: 200px auto;
            border: 1px solid #000;
            box-shadow: 1px 1px #ccc;
        }
    </style>
</head>

<body>
    <canvas id="canvas" height="600" width="700"></canvas>

    <script>
        const canvas = document.getElementById("canvas");
        const ctx = canvas.getContext("2d");
        ctx.beginPath();
        ctx.lineWidth = 5;
        ctx.moveTo(10, 300); // 将路径移动到指定的坐标点
        ctx.lineTo(100, 300); //添加一条从当前位置到指定坐标点的直线
        ctx.lineTo(100, 200);
        ctx.lineTo(200, 200);
        ctx.lineTo(200, 300);
        ctx.lineTo(300, 300);
        ctx.lineTo(300, 200);
        ctx.lineTo(400, 200);
        ctx.lineTo(400, 300);
        ctx.lineTo(500, 300);

        ctx.moveTo(100, 400);
        ctx.lineTo(500, 500);
        ctx.stroke(); //描边路径
       
        ctx.closePath()
    </script>
</body>

</html>